<template>

    <div style="display:flex;padding:10px;font-size:14px;height: 100%;box-sizing: border-box;flex-direction: column;">
      
      <div style="display:flex;height: 100%;flex-direction: column;">
        <div style="display:flex;width:100%;padding: 5px;">
          <span style="width:15%">名称</span>
          <span style="width:15%">属性</span>
          <span style="width:35%">值1</span>
          <span style="width:35%">值2</span>
        </div>

        <div style="display:flex;width:100%;padding: 5px;" v-for="(item, key) in data">
          <span  style="width:15%">{{item.name}}</span>
      
          <div style="width:15%;display:flex">
            <select style="width:100%" @change="changenums($event, key)" v-model="item.val1">
              <option value="0">大于</option>
              <option value="1">小于</option>
              <option value="2">等于</option>
              <option value="3">介于</option>
              <option value="4">近似</option>
            </select>
          </div>

          <template v-if="item.type == 'value' && item.len == 1">
            <div style="width:35%;display:flex">
              <input style="width:100%" type="text" v-model="item.val2">
            </div>
          </template>
          <template v-else-if="item.type == 'value' && item.len == 2">
            <div style="width:35%;display:flex">
              <input style="width:100%" type="text" v-model="item.val2">
            </div>
            <div style="width:35%;display:flex">
              <input style="width:100%" type="text" v-model="item.val3">
            </div>
          </template>

          <template v-else-if="item.type == 'time' && item.len == 1">
            <div style="width:35%;display:flex">
              <input style="width:100%" type="text" v-model="item.val2">
            </div>
          </template>
          <template v-else-if="item.type == 'time' && item.len == 2">
            <div style="width:35%;display:flex">
              <input style="width:100%" type="text" v-model="item.val2">
            </div>
            <div style="width:35%;display:flex">
              <input style="width:100%" type="text" v-model="item.val3">
            </div>
          </template>
          
          <template v-else-if="item.type == 'select' && item.len == 1">
            <div style="width:35%;display:flex">
              <select  style="width:100%" v-model="item.val2">
                <option :value="v.value" v-for="(v, k) in item.selectValue">{{v.name}}</option>
              </select>
            </div>
          </template>
          <template v-else="item.type == 'select' && item.len == 2">
            <div style="width:35%;display:flex">
              <select  style="width:100%" v-model="item.val2">
                <option :value="v.value" v-for="(v, k) in item.selectValue">{{v.name}}</option>
              </select>
            </div>
            <div style="width:35%;display:flex">
              <select  style="width:100%" v-model="item.val3">
                <option :value="v.value" v-for="(v, k) in item.selectValue">{{v.name}}</option>
              </select>
            </div>
          </template>
        </div>
      </div>
      <div style="display:flex;height:50px;justify-content: center;">
        <button @click="dianji" style="width: 60px;height: 30px;border-radius: 5px;background-color: #e6e6e6;cursor: pointer;">搜索</button>
      </div>
      
      

    </div>

  
</template>

<script>
const C = require('#/src/common/common.js')
export default {
    name: 'search',
    data () {
        return {
            vas: '',
            data: [{
                name: '',
                prename: '',
                type: '',
                selectValue: [],
                len: 1,
                val1: '',
                val2: '',
                val3: ''
            }]
        }
    },
    methods: {
        changenums (event, key) {
            if (3 == event.target.value) {
                this.data[key].len = 2
            } else {
                this.data[key].len = 1
            }
        },
        dianji () {
            console.log(this.data)
            let data = []
            this.data.forEach((row) => {
                let obj = {
                    name: row.name,
                    prename: row.prename,
                    selectType: row.val1,
                    firstValue: row.val2,
                    secondValue: row.val3
                }
                data.push(obj)
            })
            C.closeBrowserWindow(data)
        }
    },
    computed: {
    },
    mounted: function () {
        let data = C.getDatas()
        if (data.search) {
            data.search.forEach((row) => {
                row.len = 1
                row.val1 = 2
                row.val2 = ''
                row.val3 = ''
            })
            this.data = data.search
        }
        console.log(data)
    }
}
</script>

<style>
 select, input{
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  margin: 0px 3px;
  box-sizing: border-box;
  outline: none
 }
 html{
  outline: none
 }
</style>
